<template>
    <el-dialog 
    v-model="dialogVisible" 
    title="找回账号密码"
    :before-close="handleClose"
    custom-class="z-dialog" 
    center 
    :close-on-click-modal="false"
    :width="350">
        <el-input v-model="email" size="large" placeholder="请输入邮箱" @change="handleValidate" clearable/>
        <div class="tips" v-if="username">
            你的账号为{{username}}，密码已经重置为当前账号，登录后记得修改密码喔~
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleConfirm" :loading="loading" :disabled="username">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import validator from '@/utils/validator';
import type { FormInstance } from 'element-plus';
import { useUsersStore } from '@/store/user';
export default defineComponent({
    name: 'forgetPassword',
    components: {},
    props: {
        visible:{
            type:Boolean,
            default:false
        }
    },
    emits: ['close'],
    setup (props, context) 
    {
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            dialogVisible:props.visible,
            email:'',
            loading:false,
            username:''
        });


        let methods = {
            handleClose ()
            {
                data.dialogVisible = false;
                context.emit('close');
            },
            async handleValidate (value)
            {
                console.log(value);
                
                await validator.validateEmail(value).catch((err) => 
                {
                    proxy.$message.error(err);
                });
            },
            async handleConfirm ()
            {
                if (data.email.trim() === '') return proxy.$message.warning('情输入邮箱');
                data.loading = true;
                try 
                {
                    const res = await proxy.$http.user.forgetPassword({email:data.email});
                    data.username = res.data.content;
                }
                catch (err)
                {
                    console.error('找回失败', err);
                }
                data.loading = false;

            }
        };

        return {
            ...toRefs(data),
            ...methods
        };
    }
});

</script>
<style lang='scss' scoped>
.tips {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 20px 0 0;
}
</style>
